import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    FlatList,
    StatusBar,
    TextInput,
    ScrollView,
    DeviceEventEmitter
} from 'react-native';
import { base } from "../../../../assets/style";
import Toast from "react-native-easy-toast";
import Loading from "../../../../components/loading";
import { API } from "../../../../api";
import { i18n } from "../../../../utils/locales/i18n";

type Props = {};
export default class MyAssets extends Component<Props> {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'FCC' + i18n.t('recharge'),
            headerTintColor: '#0f0f0f',
            headerBackTitle: null
        }
    };
    constructor() {
        super();
        this.state = {
            rechargeAmount: '',
            loading: true,
            address: ''
        }
    }

    componentDidMount(): void {
        this._initAddress()
        DeviceEventEmitter.addListener('refresh_address', () => {
            this._initAddress()
        })
    }

    // 获取充币地址
    _initAddress = async () => {
        const res = await API._fetch('getRechargeAddress', {
            token: 'fcc'
        })
        // code: 10000
        // data: ""
        // msg: "获取充币地址成功"
        // status: 200

        // code: 10000
        // data: {FCC: "0xb6201e25958ab1767aae1cd29abe5c4ce9b3c007", HKDC: ""}
        // FCC: "0xb6201e25958ab1767aae1cd29abe5c4ce9b3c007"
        // HKDC: ""
        // msg: "获取信息成功"
        // status: 200
        this.setState({
            loading: false
        })

        // console.log('address', res);
        if (res.data) {
            this.setState({
                address: res.data
            })
        }

    }

    toAddAddressPage = () => {
        this.props.navigation.navigate('AddAddress')
    }
    toRechargeBtc = () => {
        this.props.navigation.navigate('RechargeBtc', { rechargeAddress: this.state.address, rechargeAmount: this.state.rechargeAmount })
    }
    render() {
        return (
            <View style={[base.container]}>
                {/*toast*/}
                <Toast ref="toast" position='bottom' positionValue={200}/>
                { this.state.loading ? (
                    <Loading
                        info={this.state.currentToastInfo}
                    />) : null }
                <View style={[{height: 100, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}]}>
                    <View style={{width: '50%'}}>
                        <Text style={[base.color_gray, { textAlign: 'center', lineHeight: 24 }]}>
                            { i18n.t('info2') }
                        </Text>
                    </View>
                </View>
                <ScrollView style={[base.flex_1, { marginTop: 10, backgroundColor: '#fff' }]}>
                    <View style={[base.content_container]}>
                        <View style={[base.flex_row_start, {height: 50}]}><Text>{ i18n.t('r_addr') }</Text></View>
                    </View>
                    <View style={[base.content_container]}>
                        {/*an address*/}
                        <View style={[base.flex_row_center, { height: 50, borderBottomColor: '#eee', borderBottomWidth: 0 }]}>
                            <View style={[base.flex_1, { paddingHorizontal: 15, borderRadius: 5, paddingVertical: 10, backgroundColor: '#eee' }]}>
                                <Text numberOfLines={1} ellipsizeMode={'middle'} style={[base.color_gray]}>
                                    { this.state.address ? this.state.address : i18n.t('info3') }
                                </Text>
                            </View>
                        </View>
                        <View style={[base.flex_row_start, { height: 50}]}>
                            <TouchableOpacity style={[base.flex_row_start]} onPress={this.toAddAddressPage}>
                                <Image style={{width: 12, height: 12}} source={require('../../../../images/mine/edit-1.png')}/>
                                <View style={{paddingLeft: 5}}><Text style={base.color_gray}>{ i18n.t('e_addr') }</Text></View>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={[base.content_container]}>
                        <View style={[base.flex_row_start, {height: 50}]}><Text>{ i18n.t('r_amount') }</Text></View>
                        <View style={[base.flex_row_between, {height: 50, backgroundColor: '#eee', width: '100%', borderRadius: 5}]}>
                            <TextInput
                                style={{height: '100%', flex: 1, paddingLeft: 10}}
                                onChangeText={(text) => this.setState({rechargeAmount: text})}
                                placeholder={i18n.t('info4')}
                                keyboardType={'numeric'}
                                value={this.state.rechargeAmount}
                            />
                            <View style={{paddingRight: 10}}><Text style={[base.color_gray]}>FCC</Text></View>
                        </View>
                    </View>
                    <View style={{ paddingTop: 50, alignItems: 'center'}}>
                        { Number(this.state.rechargeAmount) > 0 ? (
                            <TouchableOpacity onPress={this.toRechargeBtc} style={{ width: '80%', height: 50 }}>
                                <View style={{flex: 1, backgroundColor:  '#ff7606', justifyContent: 'center', alignItems: 'center', borderRadius: 25}}>
                                    <Text style={{color: '#fff'}}>{ i18n.t('next') }</Text>
                                </View>
                            </TouchableOpacity>
                        ) : (
                            <TouchableOpacity style={{ width: '80%', height: 50 }}>
                                <View style={{flex: 1, backgroundColor: '#bfbfbf', justifyContent: 'center', alignItems: 'center', borderRadius: 25}}>
                                    <Text style={{color: '#fff'}}>{ i18n.t('next') }</Text>
                                </View>
                            </TouchableOpacity>) }
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
});
